<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font feature settings</title>
    <style>
      @page {
          size: A4;
      }
      p {
          font-size : 3em;
      }
      .without-ligature {
          font-family:"Lucida Grande",sans-serif;      
          font-feature-settings: "liga" off;
      }
      .with-ligature {
          font-family:"Lucida Grande",sans-serif;            
          font-feature-settings: "liga" 1;
      }
      .half-width {
          font-family: "游明朝", "YuMincho", serif;          
          font-feature-settings: "hwid";
      }
      .zero-frac {
          font-family: "游明朝", "YuMincho";
          font-feature-settings: "afrc" 1, "zero" 1;
      }
      
    </style>
</head>
<body>
  <h1>Font feature settings</h1>
  <p>No ligatures: <span class="without-ligature">ffi</span></p>
  <p>With ligatures: <span class="with-ligature">ffi</span></p>  
  <p>Half-Width: 半角カナになる: <span class="half-width">カレーライス</span></p>
  <p>Zero-frac: Slashed zero and fractions: <span class="zero-frac">1/2+10</span></p>
</body>
</html>
